<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <title>项目总体情况看板</title>
    <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/vant@2.9/lib/index.css"
    />
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.9/lib/vant.min.js"></script>
    <script src="./js/jquery.min.js"></script>
    <style>
        .high-line {
            cursor: pointer;
            stroke: #ffd123;
            stroke-width: 2px;
            animation: rot 8s linear 1;
            stroke-dasharray: 0 400;
            stroke-dashoffset: 400;
            animation-fill-mode: forwards;
            transition: all 2s;
        }

        @keyframes rot {
            100% {
                stroke-dasharray: 400 0;
            }
        }

        .ing-high-line {
            cursor: pointer;
            stroke: #d507cb;
            stroke-width: 3px;
            stroke-dasharray: 0 400;
            animation: roting 8s linear 1;
            animation-fill-mode: forwards;
        }

        @keyframes roting {
            99% {
                stroke-dasharray: 400 0;
            }
            100% {
                stroke-dasharray: 5 5;
            }
        }
        .aaa{
            display: flex;
        }
        .aaa svg{
            margin:auto;
        }
    </style>
</head>
<body>
<div id="app" style="height: 100%">
    <van-cell-group>
        <van-cell title="项目建设概况" size="large" title-style="font-size:large"/>
    </van-cell-group>
    <table style="width: 100%;table-layout: fixed;display: table">
        <tr style="padding: 0px 0 30px 0;">
            <td>
                <div class="parent-box">
                    <img src="./image/total_inv.png" class="photo" alt="...">
                    <span class="intro">
                            <span style="font-size: 14px">总投资金额</span><br/><span style="font-size: 13px">{{constructionOverview.ttl_inv}}</span><span
                            style="font-size: 14px">亿元</span>
                        </span>
                </div>
            </td>
            <td>
                <div class="parent-box">
                    <img src="./image/total_proj_scal.png" class="photo" alt="...">
                    <span class="intro"><span style="font-size: 14px">总建设规模</span><br/><span style="font-size: 13px">{{constructionOverview.ProjScal}}</span><span
                            style="font-size: 14px">公里</span></span>
                </div>
            </td>
            <td>
                <div class="parent-box">
                    <img src="./image/project_progress.png" class="photo" alt="...">
                    <span class="intro"><span style="font-size: 14px">在建项目</span><br/><span style="font-size: 13px">{{constructionOverview.projectProgressCounts}}</span><span
                            style="font-size: 14px">个</span></span>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="parent-box">
                    <img src="./image/project_preparation.png" class="photo" alt="...">
                    <span class="intro"><span style="font-size: 14px">筹建项目</span><br/><span style="font-size: 13px">{{constructionOverview.projectPreparationCounts}}</span><span
                            style="font-size: 14px">个</span></span>
                </div>
            </td>
            <td>
                <div class="parent-box">
                    <img src="./image/project_completed.png" class="photo" alt="...">
                    <span class="intro"><span style="font-size: 14px">已通车项目</span><br/><span style="font-size: 13px">{{constructionOverview.projectCompletedCounts}}</span><span
                            style="font-size: 14px">个</span></span>
                </div>
            </td>
            <td></td>
        </tr>
    </table>
    <van-cell-group>
        <van-cell title="项目分布" size="large" title-style="font-size:large"/>
    </van-cell-group>
    <div>
        <van-tabs v-model="activeName" @click="onChangeTab">
            <van-tab title="在建项目" name="在建项目" title-style="font-size: medium">
                <select v-model="valueIng" @change="changeOptionIngSelected">
                    <option v-for="option in optionIng" v-bind:value="option">
                        {{ option.Name }}
                    </option>
                </select>
                <div class="aaa">
                    <svg width="312" height="230" id="map"
                         style="background:url(highb2.png) no-repeat; background-size:100% 100%;">
                        <g id="highmap">
                        </g>
                    </svg>
                </div>
            </van-tab>
            <van-tab title="筹建项目" name="筹建项目" title-style="font-size: medium">
                <select v-model="valuePreparation" @change="changeOptionPreparationSelected">
                    <option v-for="option in optionPreparation" v-bind:value="option">
                        {{ option.Name }}
                    </option>
                </select>
                <div class="aaa">
                    <svg width="312" height="230" id="map"
                         style="background:url(highb2.png) no-repeat; background-size:100% 100%;">
                        <g id="highmap2">
                            <path class="high-line high-line3" id="line12" fill="transparent" d="M90,111,C94,114,98,124,89,136,L84,142,73,150"></path>
                            <path class="high-line high-line3" id="line32" fill="transparent" d="M203,93,Q208,83,213,78,Q218,71,226,63"></path>

                            <path class="high-line high-line3" id="line13" fill="transparent" d="M50,133,C58,141,66,148,73,150"></path>
                            <path class="high-line high-line3" id="line14" fill="transparent" d="M196,119,Q204,119,210,123,L210,123,216,126"></path>
                            <path class="high-line high-line3" id="line15" fill="transparent" d="M254,22,Q257,30,272,30"></path>
                            <path class="high-line high-line3" id="line37" fill="transparent" d="M235,52,Q240,48,240,42"></path>
                            <path class="high-line high-line3" id="line38" fill="transparent" d="M273,106,Q272,98,271,89"></path>
                            <path class="high-line high-line3" id="line39" fill="transparent" d="M256,79,Q267,83,271,89,L271,89,282,89,Q287,89,291,92"></path>
                            <path class="high-line high-line3" id="line40" fill="transparent" d="M68,116,Q75,114,83,114,Q85,113,88,113"></path>
                            <path class="high-line high-line3" id="line41" fill="transparent" d="M88,113,Q89,113,95,115,L95,115,124,134,Q126,135,129,139,L129,139,140,152"></path>
                            <path class="high-line high-line3" id="line42" fill="transparent" d="M264,13,Q268,11,272,10"></path>
                            <path class="high-line high-line3" id="line43" fill="transparent" d="M171,88,Q185,87,196,86"></path>
                        </g>
                    </svg>
                </div>
            </van-tab>
            <van-tab title="已通车项目" name="已通车项目" title-style="font-size: medium">
                <select v-model="valueFinish"
                        @change="changeOptionFinishSelected">
                    <option v-for="option in optionFinish" v-bind:value="option">
                        {{ option.Name }}
                    </option>
                </select>
                <div class="aaa">
                    <svg width="312" height="230" id="map"
                         style="background:url(highb2.png) no-repeat; background-size:100% 100%;">
                        <g id="highmap3">
                            <path class="high-line high-line3" id="line3" fill="transparent" d="M267,139,L267,139,272,137,Q277,138,281,136"></path>
                            <path class="high-line high-line3" id="line4" fill="transparent" d="M47,74,C50,81,57,92,74,98,L74,98,90,111"></path>
                            <path class="high-line high-line3" id="line5" fill="transparent" d="M104,43,L104,43,118,67,C124,77,133,81,136,82"></path>
                            <path class="high-line high-line3" id="line6" fill="transparent" d="M136,82,Q139,86,143,84,Q147,83,154,85,Q163,88,171,88"></path>
                            <path class="high-line high-line3" id="line7" fill="transparent" d="M118,178,L118,178,125,182,L125,182,162,197,Q165,197,168,198"></path>
                            <path class="high-line high-line3" id="line8" fill="transparent" d="M212,218,Q223,204,225,193,L225,193,230,177,Q236,173,234,167,Q236,165,239,162"></path>
                            <path class="high-line high-line3" id="line9" fill="transparent" d="M184,154,C187,160,186,167,185,172,L185,172,184,196,Q177,206,179,216"></path>
                            <path class="high-line high-line3" id="line10" fill="transparent" d="M136,83,C137,98,146,107,152,121"></path>
                            <path class="high-line high-line3" id="line11" fill="transparent" d="M152,165,Q157,167,162,164,Q169,162,169,159,Q172,154,166,151,Q159,151,151,153,Q148,153,145,154,Q144,155,144,157,Q146,160,152,165"></path>

                            <path class="high-line high-line3" id="line13" fill="transparent" d="M50,133,C58,141,66,148,73,150"></path>
                            <path class="high-line high-line3" id="line14" fill="transparent" d="M196,119,Q204,119,210,123,L210,123,216,126"></path>
                            <path class="high-line high-line3" id="line15" fill="transparent" d="M254,22,Q257,30,272,30"></path>
                            <path class="high-line high-line3" id="line16" fill="transparent" d="M153,129,Q153,129,160,128,S169,126,176,122,L176,122,185,120,Q196,119,196,119"></path>
                            <path class="high-line high-line3" id="line17" fill="transparent" d="M124,134,L124,134,136,128,Q136,128,153,129"></path>
                            <path class="high-line high-line3" id="line18" fill="transparent" d="M200,97,Q202,99,208,101,Q212,104,214,109,Q216,118,217,126,Q217,127,220,130"></path>
                            <path class="high-line high-line3" id="line19" fill="transparent" d="M73,150,L81,152,87,156,C103,166,114,177,118,178"></path>
                            <path class="high-line high-line3" id="line20" fill="transparent" d="M270,152,Q268,150,269,144,L269,144,267,139"></path>
                            <path class="high-line high-line3" id="line21" fill="transparent" d="M208,27,L208,27,201,48,L201,48,198,61,Q191,66,195,73,L195,73,196,86,Q196,91,200,97"></path>
                            <path class="high-line high-line3" id="line22" fill="transparent" d="M202,93,L202,93,228,109,C229,111,232,115,237,117,Q244,119,254,120,Q261,121,263,125,Q270,130,274,128"></path>
                            <path class="high-line high-line3" id="line23" fill="transparent" d="M278,131,Q283,127,282,123,Q278,118,275,127"></path>
                            <path class="high-line high-line3" id="line24" fill="transparent" d="M91,111,Q100,107,102,101,Q108,97,114,98,C117,94,118,89,122,86,C126,83,132,82,136,83"></path>
                            <path class="high-line high-line3" id="line25" fill="transparent" d="M62,156,Q70,155,74,149"></path>
                            <path class="high-line high-line3" id="line26" fill="transparent" d="M169,157,L169,157,184,154,Q189,134,196,119,Q204,105,203,93"></path>
                            <path class="high-line high-line3" id="line27" fill="transparent" d="M94,58,Q92,61,94,64,C98,70,92,76,92,78,S91,80,93,83,Q96,86,93,91,Q93,94,94,98,Q92,100,92,104,C90,106,87,109,88,114"></path>
                            <path class="high-line high-line3" id="line28" fill="transparent" d="M84,174,Q100,182,118,185"></path>
                            <path class="high-line high-line3" id="line29" fill="transparent" d="M232,168,Q226,160,240,134,Q241,131,240,122,Q242,110,244,104,Q247,100,248,90,Q250,83,242,76"></path>
                            <path class="high-line high-line3" id="line30" fill="transparent" d="M221,213,L221,213,221,204"></path>
                            <path class="high-line high-line3" id="line31" fill="transparent" d="M166,152,Q167,143,172,138,Q182,133,184,127,Q186,112,188,105,Q191,97,196,86"></path>

                            <path class="high-line high-line3" id="line33" fill="transparent" d="M226,63,Q226,56,235,52"></path>
                            <path class="high-line high-line3" id="line34" fill="transparent" d="M152,164,Q157,164,154,162"></path>
                            <path class="high-line high-line3" id="line35" fill="transparent" d="M213,78,Q236,80,248,73"></path>
                            <path class="high-line high-line3" id="line36" fill="transparent" d="M98,200,Q103,195,110,190,L110,190,130,180,Q140,176,142,169,Q144,167,147,165"></path>
                            <path class="high-line high-line3" id="line37" fill="transparent" d="M235,52,Q240,48,240,42"></path>
                            <path class="high-line high-line3" id="line38" fill="transparent" d="M273,106,Q272,98,271,89"></path>
                            <path class="high-line high-line3" id="line39" fill="transparent" d="M256,79,Q267,83,271,89,L271,89,282,89,Q287,89,291,92"></path>
                            <path class="high-line high-line3" id="line40" fill="transparent" d="M68,116,Q75,114,83,114,Q85,113,88,113"></path>
                            <path class="high-line high-line3" id="line41" fill="transparent" d="M88,113,Q89,113,95,115,L95,115,124,134,Q126,135,129,139,L129,139,140,152"></path>
                            <path class="high-line high-line3" id="line42" fill="transparent" d="M264,13,Q268,11,272,10"></path>
                            <path class="high-line high-line3" id="line43" fill="transparent" d="M171,88,Q185,87,196,86"></path>
                            <path class="high-line high-line3" id="line44" fill="transparent" d="M152,121,L152,121,149,137,Q148,143,153,148,Q154,150,155,153"></path>
                            <path class="high-line high-line3" id="line45" fill="transparent" d="M196,86,Q202,84,208,85"></path>
                            <path class="high-line high-line3" id="line46" fill="transparent" d="M140,152,L140,152,144,156"></path>
                            <path class="high-line high-line3" id="line47" fill="transparent" d="M94,58,Q105,66,117,63"></path>

                        </g>
                    </svg>
                </div>
            </van-tab>
        </van-tabs>
    </div>
    <van-cell-group>
        <van-cell :title="detailItemName" size="large" title-style="font-size:large"/>
    </van-cell-group>
    <div v-for="item in detailTotalData" :key="item.sno">
        <van-cell-group>
            <van-cell :title="item.name" :value="item.value | numFilter" :icon="item.icon" title-style="font-size:14px" value-class="right-value-font"/>
        </van-cell-group>
    </div>
</div>
</body>
<script>
    // 在 #app 标签下渲染一个按钮组件
    new Vue({
        el: '#app',
        created() {
            console.log("created")
            let token = this.getParam("token");
            console.log("token={}", token)
            // this.token = token;
            let that = this;
            this.drawhigh("ing")
            this.login(function () {
                $.ajax(that.ip + '/API/GTHandler.ashx?action=getData', {
                    data: {},
                    dataType: 'json',
                    type: 'get',
                    success: function (data) {
                        var result = that.getSummary(data);
                        that.projectAllData = result;
                        that.constructionOverview.ttl_inv = result.ttl_inv;
                        that.constructionOverview.ProjScal = result.ProjScal;
                        that.constructionOverview.projectProgressCounts = result.project_progress.length;
                        that.constructionOverview.projectPreparationCounts = result.project_preparation.length;
                        that.constructionOverview.projectCompletedCounts = result.project_completed.length;

                        // that.optionIng = result.project_progress;
                        that.optionIng = [];
                        that.optionIng.push({
                            Name: '全部项目'
                        });
                        for (let index in result.project_progress) {
                            if (result.project_progress.hasOwnProperty(index)) {
                                let item = result.project_progress[index];
                                that.optionIng.push(item);
                            }
                        }
                        that.valueIng = that.optionIng[0];

                        // that.optionPreparation = result.project_preparation;
                        that.optionPreparation = [];
                        that.optionPreparation.push({
                            Name: '全部项目'
                        });
                        for (let index in result.project_preparation) {
                            if (result.project_preparation.hasOwnProperty(index)) {
                                let item = result.project_preparation[index];
                                that.optionPreparation.push(item);
                            }
                        }
                        that.valuePreparation = that.optionPreparation[0];

                        // that.optionFinish = result.project_completed;
                        that.optionFinish = [];
                        that.optionFinish.push({
                            Name: '全部项目'
                        });
                        for (let index in result.project_completed) {
                            if (result.project_completed.hasOwnProperty(index)) {
                                let item = result.project_completed[index];
                                that.optionFinish.push(item);
                            }
                        }
                        that.valueFinish = that.optionFinish[0];
                        that.changeOptionIngSelected();
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        debugger
                    }
                });
            });
        },
        data() {
            return {
                activeName: '在建项目',
                detailItemName: '在建项目',
                valueIng: null,
                optionIng: [],
                valuePreparation: null,
                optionPreparation: [],
                valueFinish: null,
                optionFinish: [],
                ip: 'http://221.7.253.6:9017',
                token: 'E88px0T5eC2t0gUU',
                projectAllData: null,
                //顶部视图数据
                constructionOverview: {
                    // 总投资金额
                    ttl_inv: null,
                    //总建设规模
                    ProjScal: null,
                    //在建项目个数
                    projectProgressCounts: null,
                    //筹建
                    projectPreparationCounts: null,
                    //已完成
                    projectCompletedCounts: null
                },
                //底部数据视图
                detailTotalData: [
                    {sno: 1, name: '投资金额(亿元)', value: null, icon: './image/total_inv.png'},
                    {sno: 2, name: '建设规模(公里)', value: null, icon: './image/total_proj_scal.png'},
                    // {sno: 3, name: '累计完成(亿元)', value: null, icon: './image/leiji_complete.png'},
                    // {sno: 4, name: '投资进度', value: null, icon: './image/jindu.png'},
                ],
            }
        },
        methods: {
            onChangeTab(name, title) {
                console.log(name, title);
                switch (name) {
                    case '在建项目':
                        this.drawhigh("ing")
                        this.changeOptionIngSelected();
                        break;
                    case '筹建项目':
                        this.changeOptionPreparationSelected();
                        break;
                    case '已通车项目':
                        this.changeOptionFinishSelected();
                        break;
                    default:
                        break;
                }
            },
            login(callback) {
                $.ajax(this.ip + '/API/UserHandler.ashx?action=loginByOA', {
                    data: {
                        token: this.token
                    },
                    dataType: 'json',
                    type: 'get',
                    success: function (data) {
                        if (data.Status != 1) {
                            alert(data.Msg);
                            return;
                        }
                        callback();
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert("错误:" + XMLHttpRequest.statusText)
                    }
                });
            },
            getSummary(data) {
                var result = {
                    //时间
                    SumDate: data.sumYear + "年",
                    //建设规模
                    ProjScal: 0,
                    //总投资
                    ttl_inv: 0,
                    //已完工项目建设规模
                    project_completed_ProjScal: 0,
                    //已完工项目总投资
                    project_completed_ttl_inv: 0,
                    //在建项目建设规模
                    project_progress_ProjScal: 0,
                    //在建项目总投资
                    project_progress_ttl_inv: 0,
                    //筹建项目建设规模
                    project_preparation_ProjScal: 0,
                    //筹建项目总投资
                    project_preparation_ttl_inv: 0,
                    //已完工项目
                    project_completed: [],
                    //在建项目
                    project_progress: [],
                    //筹建项目
                    project_preparation: []
                };
                $.each(data.projects, function (index, item) {
                    if (item.projectSumRpt) {
                        //result.SumDate = Common.formatDate(item.projectSumRpt.SumDate, "yyyy") + "年";
                        //pageConfig.Data.SumDate = Common.formatDate(item.projectSumRpt.SumDate, "yyyy年MM月dd日");
                        result.ProjScal += item.projectSumRpt.ProjScal;
                        result.ttl_inv += item.projectSumRpt.ttl_inv;

                    }
                    switch (item.Status) {
                        case "01":
                            if (item.projectSumRpt == null || item.projectSumRpt.F_kaigongriqi == null || item.projectSumRpt.F_kaigongriqi == "") {
                                item.projectSumRpt.F_kaigongriqi = "暂缺";
                            }
                            if (item.projectSumRpt == null || item.projectSumRpt.impess == null || item.projectSumRpt.impess == "") {
                                item.projectSumRpt.impess = "暂缺";
                            }
                            if (item.projectSumRpt) {
                                result.project_completed_ProjScal += item.projectSumRpt.ProjScal;
                                result.project_completed_ttl_inv += item.projectSumRpt.ttl_inv;
                            }
                            result.project_completed.push(item);
                            break;
                        case "02":
                            if (item.projectSumRpt) {
                                if (item.projectSumRpt == null || item.projectSumRpt.F_kaigongriqi == null || item.projectSumRpt.F_kaigongriqi == "") {
                                    item.projectSumRpt.F_kaigongriqi = "暂缺";
                                }
                                result.project_progress_ProjScal += item.projectSumRpt.ProjScal;
                                result.project_progress_ttl_inv += item.projectSumRpt.ttl_inv;
                            }


                            result.project_progress.push(item);
                            break;
                        case "03":
                            if (item.projectSumRpt) {
                                if (item.projectSumRpt == null || item.projectSumRpt.F_kaigongriqi == null || item.projectSumRpt.F_kaigongriqi == "") {
                                    item.projectSumRpt.F_kaigongriqi = "暂缺";
                                }
                                result.project_progress_ProjScal += item.projectSumRpt.ProjScal;
                                result.project_progress_ttl_inv += item.projectSumRpt.ttl_inv;
                            }

                            result.project_progress.push(item);
                            break;
                        case "04":
                            if (item.projectSumRpt) {
                                if (item.projectSumRpt == null || item.projectSumRpt.F_kaigongriqi == null || item.projectSumRpt.F_kaigongriqi == "") {
                                    item.projectSumRpt.F_kaigongriqi = "暂缺";
                                }
                                result.project_preparation_ProjScal += item.projectSumRpt.ProjScal;
                                result.project_preparation_ttl_inv += item.projectSumRpt.ttl_inv;
                            }

                            result.project_preparation.push(item);
                            break;
                        default:
                            break;
                    }
                });
                result.ProjScal = result.ProjScal.toFixed(2);
                result.ttl_inv = result.ttl_inv.toFixed(2);

                result.project_completed_ProjScal = result.project_completed_ProjScal.toFixed(2);
                result.project_completed_ttl_inv = result.project_completed_ttl_inv.toFixed(2);

                result.project_progress_ProjScal = result.project_progress_ProjScal.toFixed(2);
                result.project_progress_ttl_inv = result.project_progress_ttl_inv.toFixed(2);

                result.project_preparation_ProjScal = result.project_preparation_ProjScal.toFixed(2);
                result.project_preparation_ttl_inv = result.project_preparation_ttl_inv.toFixed(2);
                return result;
            },
            getParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            },
            changeOptionIngSelected() {
                console.log("在建项目 changeOptionIngSelected", this.valueIng.Name);
                let ttlInv = 0.00;
                let projScal = 0.00;
                if (this.valueIng.Name === '全部项目') {
                    this.detailItemName = '在建项目';
                    for (let index in this.optionIng) {
                        if (index === "0") {
                            continue;
                        }
                        if (this.optionIng.hasOwnProperty(index)) {
                            let item = this.optionIng[index];
                            ttlInv += item.projectSumRpt.ttl_inv
                            projScal += item.projectSumRpt.ProjScal
                        }
                    }

                } else {
                    this.detailItemName = this.valueIng.Name;
                    ttlInv = this.valueIng.projectSumRpt.ttl_inv;
                    projScal = this.valueIng.projectSumRpt.ProjScal;
                }
                this.detailTotalData = [];
                this.detailTotalData.push({
                    sno: 1,
                    name: '投资金额(亿元)',
                    value: ttlInv,
                    icon: './image/total_inv.png'
                });
                this.detailTotalData.push({
                    sno: 2,
                    name: '建设规模(公里)',
                    value: projScal,
                    icon: './image/total_proj_scal.png'
                });
                // this.detailTotalData.push({
                //     sno: 3,
                //     name: '累计完成(亿元)',
                //     value: projScal,
                //     icon: './image/leiji_complete.png'
                // });
                // this.detailTotalData.push({
                //     sno: 4,
                //     name: '投资进度',
                //     value: '',
                //     icon: './image/jindu.png'
                // });
            },
            changeOptionPreparationSelected() {
                console.log("正在筹建项目 changeOptionPreparationSelected", this.valuePreparation.Name);
                let ttlInv = 0.00;
                let projScal = 0.00;
                if (this.valuePreparation.Name === '全部项目') {
                    this.detailItemName = '筹建项目';
                    for (let index in this.optionPreparation) {
                        if (index === "0") {
                            continue;
                        }
                        if (this.optionPreparation.hasOwnProperty(index)) {
                            let item = this.optionPreparation[index];
                            ttlInv += item.projectSumRpt.ttl_inv
                            projScal += item.projectSumRpt.ProjScal
                        }
                    }

                } else {
                    this.detailItemName = this.valuePreparation.Name;
                    ttlInv = this.valuePreparation.projectSumRpt.ttl_inv;
                    projScal = this.valuePreparation.projectSumRpt.ProjScal;
                }
                this.detailTotalData = [];
                this.detailTotalData.push({
                    sno: 1,
                    name: '投资金额(亿元)',
                    value: ttlInv,
                    icon: './image/total_inv.png'
                });
                this.detailTotalData.push({
                    sno: 2,
                    name: '建设规模(公里)',
                    value: projScal,
                    icon: './image/total_proj_scal.png'
                });
            },
            changeOptionFinishSelected() {
                console.log("已通车项目 changeOptionFinishSelected", this.valueFinish.Name);
                let ttlInv = 0.00;
                let projScal = 0.00;
                let changeTotalInv = 0.00;
                if (this.valueFinish.Name === '全部项目') {
                    this.detailItemName = '已通车项目';
                    for (let index in this.optionFinish) {
                        if (index === "0") {
                            continue;
                        }
                        if (this.optionFinish.hasOwnProperty(index)) {
                            let item = this.optionFinish[index];
                            ttlInv += item.projectSumRpt.ttl_inv
                            projScal += item.projectSumRpt.ProjScal
                        }
                    }

                } else {
                    this.detailItemName = this.valueFinish.Name;
                    ttlInv = this.valueFinish.projectSumRpt.ttl_inv;
                    projScal = this.valueFinish.projectSumRpt.ProjScal;
                }
                this.detailTotalData = [];
                this.detailTotalData.push({
                    sno: 1,
                    name: '投资金额(亿元)',
                    value: ttlInv,
                    icon: './image/total_inv.png'
                });
                this.detailTotalData.push({
                    sno: 2,
                    name: '建设规模(公里)',
                    value: projScal,
                    icon: './image/total_proj_scal.png'
                });
                // this.detailTotalData.push({
                //     sno: 3,
                //     name: '累计变更金额(亿元)',
                //     value: projScal,
                //     icon: './image/leiji_complete.png'
                // });
                // this.detailTotalData.push({
                //     sno: 4,
                //     name: '累计变更率',
                //     value: '',
                //     icon: './image/jindu.png'
                // });
            },
            drawhigh(type){
                var data=[
                    {"id":"line3","type":"ing","d":"M169,157,L169,157,184,154,Q189,134,196,119,Q204,105,203,93"},
                    {"id":"line4","type":"ing","d":"M94,58,Q92,61,94,64,C98,70,92,76,92,78,S91,80,93,83,Q96,86,93,91,Q93,94,94,98,Q92,100,92,104,C90,106,87,109,88,114"},
                    {"id":"line5","type":"ing","d":"M232,168,Q226,160,240,134,Q241,131,240,122,Q242,110,244,104,Q247,100,248,90,Q250,83,242,76"},
                    {"id":"line6","type":"ing","d":"M221,213,L221,213,221,204"},
                    {"id":"line7","type":"ing","d":"M166,152,Q167,143,172,138,Q182,133,184,127,Q186,112,188,105,Q191,97,196,86"},
                    {"id":"line8","type":"ing","d":"M213,78,Q236,80,248,73"},
                    {"id":"line9","type":"ing","d":"M94,58,Q105,66,117,63"}
                ]
                for (var i = 0; i < data.length; i++) {
                    if(type==data[i].type){
                        this.drawLine(data[i].id,data[i].d)
                    }
                }
            },
            drawLine(id,d,type) {
                var svg = document.getElementById("highmap");
                var highline = document.createElementNS("http://www.w3.org/2000/svg","path");
                highline.setAttribute("id", "line"+id);
                highline.setAttribute("class", "ing-high-line ing-high-line"+id);
                highline.setAttribute("fill", "transparent");
                highline.setAttribute("d", d);
                highline.addEventListener("click", function () { });
                highline.addEventListener("webkitAnimationEnd", function () { });
                highline.addEventListener("animationEnd", function () {  });
                svg.appendChild(highline)
            }
        },
        filters: {
            numFilter(value) {
                let realVal = ''
                if (!isNaN(value) && value !== '') {
                    // 截取当前数据到小数点后两位
                    realVal = parseFloat(value).toFixed(2)
                } else {
                    realVal = '--'
                }
                return realVal
            }
        }
    });
    // 通过 CDN 引入时不会自动注册 Lazyload 组件
    // 可以通过下面的方式手动注册
    Vue.use(vant.Lazyload);

</script>
<style>
    .parent-ox {
        vertical-align: middle;
        text-align: left;
    }


    table {
        margin-left: 3%;
        border-spacing: 15px
    }

    table tr td {
        margin: auto;
        width: 30%;
    }

    .photo {
        vertical-align: middle;
    }

    .intro {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        text-align: right;
    }

    .right-value-font {
        font-size: 13px;
    }
    select {
        font-size: small;
        margin: 10px;
        height: 30px;
        width: 200px;
        color: #323233;
        background-color: #fff;
        border-radius: 10px;
    }
</style>

</html>